<script setup>
// 欢迎页面现在只负责展示，所有跳转逻辑都在App.vue中处理
// 用户点击页面可以跳过等待时间
const skipWelcome = () => {
	// 触发App.vue中的验证逻辑
	uni.$emit('skipWelcome');
}
</script>

<template>
	<view class="welcome-container" @click="skipWelcome">
		<!-- 背景渐变 -->
		<view class="background-gradient"></view>
		
		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 大Logo -->
			<view class="logo-section">
				<image src="/static/images/logo.png" class="main-logo" mode="aspectFit"></image>
			</view>
			
			<!-- 底部标语 -->
			<view class="slogan-section">
				<text class="slogan-main">编织梦想 程就未来</text>
				<text class="slogan-sub">让每一次求职都成为人生的转折点</text>
			</view>
		</view>
		
		<!-- 底部版权信息 -->
		<view class="footer">
			<text class="copyright">© 2024 智聘科技 版权所有</text>
		</view>
	</view>
</template>

<style scoped>
.welcome-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: #00bdb4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.background-gradient {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #00bdb4 0%, #00a8a0 50%, #00958e 100%);
	z-index: 1;
}

.content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
}

.logo-section {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 120rpx;
	width: 400rpx;
	height: 400rpx;
	background-color: #ffffff;
	border-radius: 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
}

.main-logo {
	width: 400rpx;
	height: 400rpx;
	border-radius: 40rpx;
}

.slogan-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 200rpx;
}

.slogan-main {
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 20rpx;
	text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.slogan-sub {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.footer {
	position: absolute;
	bottom: 60rpx;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	z-index: 2;
}

.copyright {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}

/* 添加一些动画效果 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(60rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.logo-section {
	animation: fadeInUp 1s ease-out;
}

.slogan-section {
	animation: fadeInUp 1s ease-out 0.3s both;
}

.footer {
	animation: fadeInUp 1s ease-out 0.6s both;
}
</style>
